<div class="container">
  <nz-page-header [nzGhost]="false" class="px-0">
    <nz-page-header-title>{{ total || 0 }} 名成员{{total > 1 ? '' : ''}}</nz-page-header-title>
    <nz-page-header-extra>
      <nz-space>
        <button (click)="refresh()" *nzSpaceItem nz-button nz-tooltip nzShape="circle" nzTooltipTitle="刷新成员"
          nzType="default">
          <span [nzSpin]="loading" nz-icon nzTheme="outline" nzType="sync"></span>
        </button>
        <form (ngSubmit)="search()" *nzSpaceItem [formGroup]="searchForm" [nzLayout]="'vertical'" nz-form>
          <nz-input-group [nzSuffix]="suffixIconSearch">
            <input [formControlName]="'search'" nz-input placeholder="按姓名搜索" type="text" />
          </nz-input-group>
          <ng-template #suffixIconSearch>
            <span nz-icon nzType="search"></span>
          </ng-template>
        </form>
        <span *nzSpaceItem>
          <button (click)="openAddMemberForm()" nz-button nzType="primary">添加成员</button>
        </span>
      </nz-space>
    </nz-page-header-extra>
  </nz-page-header>

  <nz-card>
    <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzParagraph]="{ rows: 6 }">
      <nz-table #table (nzQueryParams)="onQueryParamsChange($event)" [nzData]="model.data || []"
        [nzFrontPagination]="false" [nzLoading]="loading" [nzPageIndex]="pageIndex"
        [nzPageSizeOptions]="paginationSizes" [nzPageSize]="pageSize" [nzTotal]="total" class="custom-table"
        nzShowSizeChanger nzSize="small">
        <thead>
          <tr>
            <th [nzSortFn]="true" nzColumnKey="name" scope="col">姓名</th>
            <!--        <th [nzSortFn]="true" nzColumnKey="job_title" scope="col">Job Title</th>-->
            <th [nzSortFn]="true" nzColumnKey="projects_count" scope="col">项目</th>
            <th [nzSortFn]="true" nzColumnKey="email" scope="col">邮箱</th>
            <th [nzSortFn]="true" colspan="2" nzAlign="left" nzColumnKey="role_name" scope="col">团队访问权限</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of table.data" class="actions-row">
            <td (click)="selectMember(data.id)" class="cursor-pointer">
              <nz-avatar *ngIf="data.name" [nzSize]="28" [nzText]="data.name.charAt(0).toUpperCase()"
                [style.background-color]="data.avatar_url ? '#ececec' : getColor(data.name)" [nzSrc]="data.avatar_url"
                class="me-2"></nz-avatar>

              <nz-badge [nzColor]="data.is_online ? 'green' : ''"
                class="d-inline-flex align-items-center flex-row-reverse" style="color: inherit">
                {{ data.name }}
              </nz-badge>
              <span nz-typography nzType="warning" *ngIf="!data.active"> (已停用)</span>
            </td>
            <!--        <td (click)="selectMember(data.id)" class=cursor-pointer>{{ data.job_title || "-" }}</td>-->
            <td (click)="selectMember(data.id)" class="cursor-pointer">{{ data.projects_count || 0 }}</td>

            <td (click)="selectMember(data.id)" class="cursor-pointer">
              <span *ngIf="data.email && !data.pending_invitation">{{data.email}}</span>
              <span *ngIf="!data.email && !data.pending_invitation">-</span>
              <span *ngIf="data.email && data.pending_invitation">
                {{data.email}} <small nz-typography nzType="secondary">(邀请待定)</small>
              </span>
            </td>
            <td (click)="selectMember(data.id)" class="cursor-pointer">
              <span *ngIf="data.is_admin" class="admin-role" nz-typography>{{data.role_name}}</span>
              <span *ngIf="data.is_owner" class="owner-role" nz-typography>{{data.role_name}}</span>
              <span *ngIf="!data.is_admin && !data.is_owner" class="member-role" nz-typography>{{data.role_name}}</span>
            </td>
            <td class="actions-col">
              <div *ngIf="!data.is_owner" class="actions">
                <nz-space>
                  <button *nzSpaceItem (click)="editMember(data.id)" nz-button nz-tooltip nzSize="small"
                    [nzTooltipPlacement]="'top'" [nzTooltipTitle]="'编辑'" [nzType]="'default'">
                    <span nz-icon nzType="edit"></span>
                  </button>

                  <div *nzSpaceItem>
                    <button *ngIf="data.id !== profile?.team_member_id" (nzOnConfirm)="toggleMemberActiveStatus(data)"
                      nz-button nz-tooltip nz-popconfirm nzSize="small" [nzOkText]="'是'" [nzPopconfirmTitle]="'你确定吗?'"
                      [nzTooltipPlacement]="'top'" [nzTooltipTitle]="data.active ? '停用' : '启用'" [nzType]="'default'">
                      <span nz-icon nzType="user-switch" nzTheme="outline"></span>
                    </button>
                  </div>

                  <button *nzSpaceItem (nzOnConfirm)="deleteTeamMember(data.id, data.email)" nz-button nz-popconfirm
                    nz-tooltip [nzOkText]="'是'" [nzPopconfirmTitle]="'你确定吗?'" [nzSize]="'small'"
                    [nzTooltipPlacement]="'top'" [nzTooltipTitle]="'删除'" [nzType]="'default'">
                    <span nz-icon nzType="delete"></span>
                  </button>
                </nz-space>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-skeleton>
  </nz-card>
</div>

<worklenz-team-members-form (onCancel)="reset()" (onCreateOrUpdate)="handleOnCreateOrUpdate($event)"
  [(show)]="showTeamMemberModal" [memberId]="selectedMemberId"></worklenz-team-members-form>